<template>
	<div class="container" :model="ruleForm" :rules="rules">
		<el-form label-width="140px">
			
		
		<div class="container">
		     <h3>企业信息</h3>
		     <el-row :gutter="20" style="margin-top:20px;">
		             <el-col :span="10" >
		     			<el-form-item label="企业简称">
		     			<el-input class="handle-input" placeholder="追溯码上展示，不得超过6个字" v-model="ruleForm.abbreviation" style="width:300px"></el-input>
		     			</el-form-item>
		     			<!-- <el-form-item label="所在区域：" prop="area">
		     				<el-cascader size="large" :options="options" style="width:300px" v-model="form.area" ></el-cascader>
		     			</el-form-item> -->
		     
		     			<el-form-item label="营业执照照片">
		     				<el-upload
		     					class="upload-poster"                               
		     					action="https://jsonplaceholder.typicode.com/posts/"
		     					:show-file-list="false"
		     					:on-change="imgPreview"
		     					:auto-upload="false">
		     					<img v-if="logoImg" :src="logoImg" class="avatar">
		     					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		     				</el-upload>
		     				jpg、png、gif格式，不超过2MB
		     			</el-form-item>
		             </el-col>
		         <el-col :span="12">
		         <el-form-item label="企业名称">
		             <el-input class="handle-input" placeholder="企业全称" v-model="ruleForm.name" style="width:300px"></el-input>
		         </el-form-item>
		     	
		         <el-form-item label="统一社会信用代码">
		             <el-input class="handle-input" placeholder="请输入统一社会信用代码" v-model="ruleForm.creditCode" style="width:300px"></el-input>
		         </el-form-item>
		         <el-form-item label="注册地址">
		             <el-input class="handle-input" placeholder="请填写详细注册地址" v-model="ruleForm.area" style="width:300px"></el-input>
		         </el-form-item>
		         
				<el-form-item label="营业期限">
					<el-col :span="5">
						<el-date-picker  type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled1" v-model="date1" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="1" style="margin-left:10px;">至</el-col>
					<el-col :span="5">
						<el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled1" v-model="date2" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col :span="4" style="margin-left:5px;">
						<el-checkbox v-model="checked1" @change="changeState1">长期</el-checkbox>
					</el-col>
				</el-form-item>
				<el-form-item label="果园类型">
					<el-select v-model="ruleForm.fruitType" placeholder="请选择分类">
					    <el-option label="普通果园" value="普通果园"></el-option>
						<el-option label="智慧果园" value="智慧果园"></el-option>
                     </el-select>
				</el-form-item>
				<el-form-item label="果园组织类型">
					<el-select v-model="ruleForm.compType" placeholder="请选择分类">
                        <el-option label="公司" value="公司"></el-option>
						<el-option label="合作社" value="合作社"></el-option>
						<el-option label="私人" value="私人"></el-option>
                    </el-select>
				</el-form-item>
		     </el-col>
		     </el-row>
		 </div>
		<div class="container" style="margin-top:20px">
		     <h3 style="margin-bottom: 20px">法人信息</h3>
		     <el-row class="demo-ruleForm">
		        <el-col :span="10">
		            <el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
		                 <upload-img ref="uploadChang1" :maxNum="1" :files='listUrl1' style="width:300px"></upload-img>
		             </el-form-item>
		             <el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
		                 <upload-img ref="uploadChang2" :maxNum="1" :files='listUrl2' style="width:300px"></upload-img>
		             </el-form-item>
		         </el-col>
		         <el-col :span="14">
		             <el-form-item label="法人代表：">
		                 <el-input v-model="ruleForm.legalName" style="width:300px"></el-input>
		             </el-form-item>
		             <el-form-item label="身份证号：">
		                 <el-input v-model="ruleForm.legalID" style="width:300px"></el-input>
		             </el-form-item>
					 <el-form-item label="证件有效期">
						<el-col :span="5">
							<el-date-picker  type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled2" v-model="date3" style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col class="line" style="margin-left:10px;" :span="1">至</el-col>
						<el-col :span="5">
							<el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled2" v-model="date4" style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col :span="4" style="margin-left:5px;">
							<el-checkbox v-model="checked2" @change="changeState2">长期</el-checkbox>
						</el-col>
					</el-form-item>
		            <el-form-item label="手机号：" style="width:500px">
		                 <el-input v-model="ruleForm.legalPhone" style="width:300px"></el-input>
		             </el-form-item>
		         </el-col>
		     </el-row>
		 </div> 
								
		<div class="container" style="margin-top:20px">
			 <h3 style="margin-bottom: 20px">运营者信息</h3>
			 <el-row class="demo-ruleForm">
				<el-col :span="10">
					<el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
						<upload-img ref="uploadChang3" :maxNum="1" :files='listUrl3' style="width:300px"></upload-img>
					</el-form-item>
					<el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
						<upload-img ref="uploadChang4" :maxNum="1" :files='listUrl4 ' style="width:300px"></upload-img>
					</el-form-item>
				</el-col>
				<el-col :span="14">
				
					<el-form-item label="运营人代表：">
						<el-input v-model="ruleForm.operateName" style="width:300px"></el-input>
					</el-form-item>
					<el-form-item label="身份证号：">
						<el-input v-model="ruleForm.operateID" style="width:300px"></el-input>
					</el-form-item>
					<!--<el-form-item label="证件有效期：">
							<el-date-picker
								value-format="yyyy/MM/dd"
								format="yyyy/MM/dd"
								style="width:300px"
								v-model="value3"
								type="daterange"
								:disabled="disabled3"
								range-separator="至"
								:start-placeholder="ruleForm.startTime3"
								:end-placeholder="ruleForm.endTime3">
							</el-date-picker>
						   <el-checkbox style="margin-left:10px;" v-model="checked3" @change="changeState3">长期</el-checkbox>
					</el-form-item>-->
					<el-form-item label="证件有效期">
						<el-col :span="5">
							<el-date-picker  type="date" format="yyyy/MM/dd" v placeholder="选择日期" :disabled="disabled3" v-model="date5" style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col class="line" style="margin-left:10px;" :span="1">至</el-col>
						<el-col :span="5">
							<el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled3" v-model="date6" style="width: 100%;"></el-date-picker>
						</el-col>
						<el-col :span="4" style="margin-left:5px;">
							<el-checkbox v-model="checked3" @change="changeState3">长期</el-checkbox>
						</el-col>
					</el-form-item>
					<el-form-item label="手机号：" style="width:500px">
						<el-input v-model="ruleForm.operatePhone" style="width:300px"></el-input>
					</el-form-item>
				</el-col>
			 </el-row>
		 </div> 
		 <div class="container" style="margin-top:20px;">
			 <h3 style="margin-bottom: 20px">变更记录</h3>
			 
			 <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header" style="margin-top: 20px">
			     <el-table-column prop="clientName" sortable label="操作人"></el-table-column>
			     <el-table-column prop="area" sortable label="操作行为"></el-table-column>
			     <el-table-column prop="userName" sortable label="操作时间"></el-table-column>
			     
			 </el-table>
		 </div>
		 <el-form-item class="footerFixed" label-width="0px">
		     <el-button type="primary" @click="submitrule()">提交</el-button>
		     <el-button @click="backPage">返回</el-button>
		 </el-form-item>
		 </el-form>
	</div>                                                                                                                                                                                         
</template>

<script>
	import { CodeToText } from 'element-china-area-data';
	import uploadImg from '../../../common/uploadImg';
	import {
		goverment_check,
		goverment_save,
		company_get_update
	} from "@/request/supervisionCenterApi.js"
	export default{
		components: {
		    uploadImg,
		},
		data(){
			return{
				rules:{
					 abbreviation: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 area: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 name: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 creditCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 region: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 legalName: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 legalID: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 legalPhone: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 operateName: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 operateID: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 operatePhone: [{ required: true, message: '不能为空', trigger: 'blur' }],
				},
				tableData:[],
				ruleForm:{
					startTime1: "开始日期",
					endTime1: "结束日期",
					startTime2: "开始日期",
					endTime2: "结束日期",
					startTime3: "开始日期",
					endTime3: "结束日期",
					compType:"",
					fruitType:""
				},
				checked1:false,
				checked2:false,
				checked3:false,
				listUrl1:'',
				listUrl2:'',
				listUrl3:'',
				listUrl4:'',
				value1:'',
				value2:'',
				value3:'',
				disabled1:false,
				disabled2:false,
				disabled3:false,
				logoImg: '',
				date1: '', // 企业信息营业期限
				date2: '', // 企业信息营业期限
				date3: '', // 法人信息证件有效期
				date4: '', // 法人信息证件有效期
				date5: '', // 运营者信息证件有效期
				date6: '', // 运营者信息证件有效期
			}
		},
		mounted(){
			this.id = this.$route.query.id
			this.init()
		},
		methods:{
			// 返回上一页
			backPage(){
				this.$router.go(-1)
			},
			init(){
				goverment_check(this.id).then((res)=>{
					console.log(res)
					this.ruleForm = res.data
					console.log('++++',this.ruleForm)
					if(this.ruleForm.expiretimeEnd){
						this.value1 = this.ruleForm.expiretimeEnd
					}
					// console.log(this.ruleForm.time)
					var list = this.ruleForm.area.split(",")
					var arr = ""
					for (let k = 0; k < list.length; k++) {
					    arr += CodeToText[list[k]] + "/"   
					}
					this.ruleForm.area = arr.substr(0,arr.length-1)
					if(this.ruleForm.legalTime != "永久"){
						var str1 = this.ruleForm.legalTime.match("([^,]+)至");
						this.ruleForm.startTime1=str1[0].substring(0,str1[0].length-1);
						this.ruleForm.endTime1=str1[1];
					}else{
						this.checked1 = true
					}
					if(this.ruleForm.operateTime != "永久"){
						var str2 = this.ruleForm.operateTime.match("([^,]+)至");
						this.ruleForm.startTime2=str2[0].substring(0,str2[0].length-1);
						this.ruleForm.endTime2=str2[1];
					}else{
						this.checked2 = true
					}
					if(this.ruleForm.term != "永久"){
						var str3 = this.ruleForm.term.match("([^,]+)至");
						this.ruleForm.startTime3=str3[0].substring(0,str3[0].length-1);
						this.ruleForm.endTime3=str3[1];
					}else{
						this.checked3 = true
					}


					const arr1 = this.ruleForm.legalImg.split(";")
					if(arr1 == ""){
						
						}else{
							this.listUrl1 = arr1.map(t =>{
								var obj = {}
					        obj.url =this.$store.state.plantImg + t
					        obj.name = this.$store.state.plantImg + t
					        return obj
					    })
					}
					//法人信息  身份背面
					// this.ruleForm.oldLegalIDImg = res.data.legalIDImg
					const arr2 = this.ruleForm.legalIDImg.split(";")
					if(arr2 == ""){
						
						}else{
							this.listUrl2 = arr2.map(t =>{
								var obj = {}
					        obj.url =this.$store.state.plantImg + t
					        obj.name = this.$store.state.plantImg + t
					        return obj
					    })
					}
					
					// this.ruleForm.oldLegalIDImg = res.data.legalIDImg
					const arr3 = this.ruleForm.operateImg.split(";")
					if(arr3 == ""){
						
						}else{
							this.listUrl3 = arr2.map(t =>{
								var obj = {}
					        obj.url =this.$store.state.plantImg + t
					        obj.name = this.$store.state.plantImg + t
					        return obj
					    })
					}
					
					// this.ruleForm.oldLegalIDImg = res.data.legalIDImg
					const arr4 = this.ruleForm.operateIDImg.split(";")
					if(arr4 == ""){
						
						}else{
							this.listUrl4 = arr4.map(t =>{
								var obj = {}
					        obj.url =this.$store.state.plantImg + t
					        obj.name = this.$store.state.plantImg + t
					        return obj
					    })
					}
					// if(this.ruleForm.logoImg == "" || this.ruleForm.logoImg == null){
						//     this.ruleForm.logoImg = this.ruleForm.logoImg
					// }else{
						//     this.logoImg = this.$store.state.plantImg + this.ruleForm.logoImg
					// }
					if(this.ruleForm.logozImg == "" || this.ruleForm.logozImg == null){
						this.ruleForm.logozImg = this.ruleForm.logozImg
					}else{
						this.logozImg = this.$store.state.plantImg + this.ruleForm.logozImg
					}
					if(this.ruleForm.licenseImg == "" || this.ruleForm.licenseImg == null){
						this.ruleForm.licenseImg = this.ruleForm.licenseImg
					}else{
						this.licenseImg1 = this.$store.state.plantImg + this.ruleForm.licenseImg
					}
                    if(this.ruleForm.coverImg == "" || this.ruleForm.coverImg == null){
						this.ruleForm.coverImg = this.ruleForm.coverImg
                    }else{
						this.coverImg = this.$store.state.plantImg + this.ruleForm.coverImg
                    }
					
					if(this.ruleForm.introduce == undefined || this.ruleForm.introduce == null || this.ruleForm.introduce == ""){
						
						}else{
						var editor = new E(this.$refs.editor)
						editor.customConfig.uploadImgServer = this.$store.state.uploadImgurl +'/file/upload';
						editor.customConfig.uploadFileName = 'file';
						editor.customConfig.uploadImgHooks = {
							customInsert: function (insertImg, result, editor) {
								
								var url =  "http://" + window.location.host + "/file/show/" +  result.data
						        insertImg(url)
						    }
						}
						editor.customConfig.onchange = (html) => {
							this.ruleForm.introduce = html
						}
						editor.create();
						editor.txt.html(this.ruleForm.introduce)
					}
					this.logoImg = this.$store.state.plantImg + this.ruleForm.licenseImg
				})
				company_get_update(this.id).then((res)=>{
					this.tableData = res
				})
			},
			imgPreview(file,fileList){
				this.logoImg =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			    if (regex.test(fileName.toLowerCase())) {
			        this.form.files = file.raw
			        this.form.licenseImg = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			},
			changeState1(){
				if(this.checked1 == false){
			        this.disabled1 = false
			    }else{
			        this.disabled1 = true
			    }
			},
			changeState2(){
				if(this.checked2 == false){
			        this.disabled2 = false
			    }else{
			        this.disabled2 = true
			    }
			},
			changeState3(){
				if(this.checked3 == false){
			        this.disabled3 = false
			    }else{
			        this.disabled3 = true
			    }
			},
			// 提交
			submitrule(){		
				if(this.area){
					this.ruleForm.area = this.area.join(",")
				}
				if(this.checked1 == true){
					this.ruleForm.term = "永久"  
				}else{
					if(this.date1 == ""){
						
				    }else{
						this.ruleForm.term = this.date1 + "至" + this.date2
				    }
				}
				if(this.checked2 == true){
					this.ruleForm.legalTime = "永久"  
				}else{
					if(this.date3 == ""){
						
					}else{
						this.ruleForm.legalTime = this.date3 + "至" + this.date4
				    }
				}
				if(this.checked3 == true){
					this.ruleForm.operateTime = "永久"  
				}else{
					if(this.date5 == ""){
						
						}else{
							this.ruleForm.operateTime = this.date5 + "至" + this.date6
				    }
				}
				let formdata = new FormData()
				var imgurls1 = this.$refs.uploadChang1.fileList
				var arr1 = ""
				for(var i=0;i<imgurls1.length;i++){
					if(imgurls1[i].status != "success"){
						formdata.append("files",imgurls1[i].raw)
				    }
				    arr1 += imgurls1[i].name + ';'
				}
				var str1 = arr1.substr(0,arr1.length-1)
				this.ruleForm.legalImg = str1.substring(str1.lastIndexOf("/")+1)
				
				var imgurls2 = this.$refs.uploadChang2.fileList
				var arr2 = ""
				for(var i=0;i<imgurls2.length;i++){
					if(imgurls2[i].status != "success"){
						formdata.append("files",imgurls2[i].raw)
				    }
				    arr2 += imgurls2[i].name + ';'
				}
				var str2 = arr2.substr(0,arr2.length-1)
				this.ruleForm.legalIDImg = str2.substring(str2.lastIndexOf("/")+1)
				
				var imgurls3 = this.$refs.uploadChang3.fileList
				var arr3 = ""
				for(var i=0;i<imgurls3.length;i++){
					if(imgurls3[i].status != "success"){
						formdata.append("files",imgurls3[i].raw)
				    }
				    arr3 += imgurls3[i].name + ';'
				}
				var str3 = arr3.substr(0,arr3.length-1)
				this.ruleForm.operateImg = str3.substring(str3.lastIndexOf("/")+1)
				
				
				var imgurls4 = this.$refs.uploadChang4.fileList
				var arr4 = ""
				for(var i=0;i<imgurls4.length;i++){
					if(imgurls4[i].status != "success"){
						formdata.append("files",imgurls4[i].raw)
				    }
				    arr4 += imgurls4[i].name + ';'
				}
				var str4 = arr4.substr(0,arr4.length-1)
				this.ruleForm.operateIDImg = str4.substring(str4.lastIndexOf("/")+1)
				this.ruleForm.user = JSON.stringify(this.user)
				this.ruleForm.address = this.ruleForm.region
				this.ruleForm  = {...this.form,...this.ruleForm}
				console.log(this.ruleForm)
				for(var a in this.ruleForm){
					if(this.ruleForm[a] == null || this.form[a] == "null"){
						this.ruleForm[a] = ""
				        formdata.append(a,'') 
				    }else{
						formdata.append(a,this.ruleForm[a])
				    }
				}
				this.area = ""
				goverment_save(formdata).then((res)=>{
					this.$notify({
						title: '操作成功',
					    message: '保存成功',
					    type: 'success'
					});
				    this.$router.go(-1)
				})
			},
		}
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
	   border: 1px dashed #d9d9d9;
	   border-radius: 6px;
	   cursor: pointer;
	   position: relative;
	   width:180px;
	   overflow: hidden;
	 }
	 
	 .avatar-uploader .el-upload:hover {
	   border-color: #409EFF;
	 }
	 .el-upload--text{
	     width:180px;
	 }
	 .avatar-uploader-icon {
	   font-size: 28px;
	   color: #8c939d;
	   width: 178px;
	   height: 178px;
	   line-height: 178px;
	   text-align: center;
	 }
	 .avatar {
	   width: 178px;
	   height: 178px;
	   display: block;
	 }
</style>